<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { searchRole, roleAddUser } from '@/api/platform-management';

  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();
  const selectData = ref<any[]>([]);
  // 监听弹框
  watch(
    () => booleanStore.boolValue3,
    (newValue: boolean) => {
      if (booleanStore.num3 === 6) showDrawer.value = newValue;
    }
  );
  // 当用户修改时
  watch(
    () => booleanStore.users,
    () => {
      selectData.value = booleanStore.list[0].map((item: any) => item.id);
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool3(6);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool3(6);
  }
  // 点击确定
  async function handleOk() {
    const params: any[] = [];
    selectData.value.forEach((item: any) => {
      params.push({
        empcode: booleanStore.users[0].id,
        roleid: item,
      });
    });
    const data: any = await roleAddUser(params);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '保存成功',
        closable: true,
      });
      booleanStore.toggleBool3(6);
    } else {
      Notification.error({
        title: '失败',
        content: '修改失败',
        closable: true,
      });
    }
  }
  const roleData: any = ref();
  // 发送搜索数据
  const flowQueryData = {
    pageSize: 1000,
    curPageNum: 1,
    // text: '',
  };
  // 获取菜单
  async function getRoleList() {
    roleData.value = await searchRole(flowQueryData);
  }

  onMounted(() => {
    getRoleList();
  });
</script>

<template>
  <a-drawer
    :width="450"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 授权 </template>
    <div>
      <a-checkbox-group v-model:model-value="selectData" direction="vertical">
        <a-checkbox
          v-for="(item, index) in roleData?.list"
          :key="index"
          :value="`${item.id}`"
          >{{ item.text }}</a-checkbox
        >
      </a-checkbox-group>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
